<template>
	<view class="content">
		<!-- 扫码  调用摄像头 -->
		<view v-if="isScan" class="content">
			<view class="scanCard content">
				<text>扫描包装盒内二维码</text>
				<text>绑定设备</text>
				<image :src="staticUrl+'/image/login/img_QRcode.png'" style="width: 342rpx;height: 336rpx;margin-top: 147rpx;"></image>
			</view>
			<view class="NextStepBtn content" @click="scanQRCode()"><text>点我扫码</text></view>
			<text class="manuallyInput" @click="manuallyInput()">手动输入</text>
		</view>
		<view v-if="!isScan">
			<view class="MT48" v-if="isFail"><text class="title">扫码失败,请手动输入</text></view>
			<view class="DeviceId" style="margin-top: 32rpx;">
				<input class="inputDeviceId" type="text" placeholder="请输入校验码" placeholder-class="DeviceIdPlaceSytle" v-model="cardId" />
			</view>
			<view style="margin-top: 40rpx;"><text class="tips">校验码位于包装盒内二维码旁。</text></view>
			<view style="margin: 433rpx auto auto;"><text v-if="isError" class="ErrorTip">你输入的校验码不正确，请重新输入。</text></view>
			<view class="NextStepBtn content" @click="nextStep()"><text>下一步</text></view>
			<view class="content"><text class="manuallyInput" @click="goScan()">去扫码</text></view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/login';
import regular from '@/api/regular';
// import config from '@/utils/request.js'
// import requestConfig from '../../../uni_modules/zhouWei-request/js_sdk/requestConfig.js';
export default {
	data() {
		return {
			staticUrl:this.$config.StaticUrl,
			isScan: true, //是否去扫码
			cardId: '', //设备号
			isError: false, //发送给服务器的设备号或者校验码是否正确
			isFail: false, //是否是扫码失败进入的页面
			isAudio: true //是否需要播放引导视频
		};
	},
	onLoad(option) {
		if (option.isAudio != 'undefined') {
			this.isAudio = option.isAudio;
		}
	},
	methods: {
		nextStep() {
			if (this.cardId == '') {
				this.$toast('验证码为空', { icon: 'error' });
				return;
			} else if (!this.$regular.checkCode(this.cardId)) {
				this.$toast('请输入正确格式', { icon: 'error' });
				return;
			}
			this.bindService();
		},
		scanQRCode() {
			let that = this;
			// 调起条码扫描
			uni.scanCode({
				scanType: ['qrCode'],
				success: function(res) {
					// console.log(typeof res.result);
					if (typeof res.result == 'object') {
						that.isScan = false;
						that.isFail = true;
						return;
					}
					try {
						let result = JSON.parse(res.result);
						if (result.hasOwnProperty('ei-code')) {
							that.$toast('扫码成功', { icon: 'success' });
							that.cardId = result["ei-code"];
							that.bindService();
						} else {
							console.log('这不是我们的码');
							that.isScan = false;
							that.isFail = true;
						}
					} catch (e) {
						//TODO handle the exception
						that.isScan = false;
						that.isFail = true;
						console.log('e', e);
					}
				},
				fail(res) {
					console.log('扫码失败！');
					that.$toast('扫码失败', { icon: 'error' });
					that.isScan = false;
					that.isFail = true;
				}
			});
		},

		// 绑定服务
		bindService() {
			let that = this;
			let userId = this.$store.state.userInfo.currentUser.userId;
			let data = {
				action: 'bindService',
				userId: userId,
				params: {
					cardId: that.cardId
				}
			};
			api.bindService(data)
				.then(function(res) {
					console.log('bind head success!!', res);
					if (res.data.code == 2000) {
						if (res.data.message == '该设备的服务账户绑定用户数量已满') {
							that.$toast('今日绑定用户数量已满', { icon: 'none' });
							return;
						}
						uni.redirectTo({
							url: 'bindSuccess?isAudio=' + that.isAudio
						});
					}else if(res.data.code === 2001) {
						if(res.data.message === "product state error") {
							that.$toast('设备绑定失败',{duration:3000});
						}
					} else {
						// that.$toast(res.data.message,{icon:'none'});
						that.isError = true;
					}
				})
				.catch(function(error) {
					console.log('bindService fail', error);
				});
		},
		// 手动输入
		manuallyInput() {
			console.log('3333');
			this.isScan = false;
			this.isFail = false;
		},
		// 返回扫码
		goScan() {
			this.isScan = true;
		}
	}
};
</script>

<style>
page {
	background-color: #fafafa;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.MT48 {
	margin-top: 48rpx;
}
.scanCard {
	margin-top: 42rpx;
	width: 700rpx;
	height: 850rpx;
	background-color: #ffffff;
	border-radius: 15px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.scanCard text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.NextStepBtn {
	margin-top: 73rpx;
	background-color: #0659c7;
	border-radius: 50px;
	width: 700rpx;
	height: 100rpx;
}
.NextStepBtn text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ffffff;
}
.manuallyInput {
	margin: 47rpx auto 48rpx;
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
}
.title {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
}
/* 紧急联系人 */
.DeviceId {
	width: 700rpx;
	height: 122rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	position: relative;
}

.inputDeviceId {
	margin-left: 45rpx;
	width: 600rpx;
	height: 100%;
}

.DeviceIdPlaceSytle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.tips {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.goScan {
	margin-top: 50rpx;
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
}
.ErrorTip {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ff0000;
}
</style>
